<template>
	<div :style="{height: options.height+`px`, minHeight: '100px'}">
		<div class="my-order-view">
			<div class="content">{{options.content}}</div>
			<div class="btn">
				<div>{{options.leftBtnText}}</div>
				<div>{{options.rightBtnText}}</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: "btn-message-view",
	props: {
		view: {
			type: Object,
			default: () => ({})
		}
	},
	computed: {
		options() {
			console.log('this.view.options',this.view.options)
			return this.view.options;
		}
	}
};

</script>
<style lang="scss" scoped>
.my-order-view {
	background: #ffffff;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	width: fit-content;
	padding: 15px;
	border-radius: 6px;
}
.content{

}
.btn{
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #ffffff;
	margin-top: 10px;
	div{
		width: 80px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		background: #00C957;
		border-radius: 30px;
		&:first-child{
			margin-right: 15px;
		}
	}
}
</style>
